<h1>Gestión de participantes</h1>
<h3>Bienvenido</h3>

<table id="tabla">
	
</table>
<style type="text/css">

	table {
		border: 2px solid black;
		margin: 0 auto;
	}

	tr {
		border: 2px outset black;
	}

	td, th {
		padding: 10px;
		text-align: center;
	}

	table th:nth-child(1n) {
		background-color: green;
		color: white;
	}

	table td:nth-child(2n) {
		background-color: orange;
	}

	table td:nth-child(2n+1) {
		background-color: #2DA9D2;
	}

</style>


<script type="text/javascript">

	var participantes = <?= json_encode($d['mainView']['listaParticipantes']); ?>;
	
	document.getElementById('tabla').innerHTML='<tr><th>Nombre</th><th>Edad</th><th>Categoría</th></tr>';

	for (var i in participantes) {
		var participante = participantes[i];
		var nombre = participante['nombre'];
		var edad = participante['edad'];
		var categoria = participante['categoria'];
		var fila = "<tr><td>"+nombre+"</td><td>"+edad+"</td><td>"+categoria+"</td></tr>";
		document.getElementById('tabla').innerHTML += fila;
	}
	
	
</script>
